<template>
  <div class="container">
    <!-- 左边工具栏 -->
    <div class="left">
      <slot></slot>
      <template v-if="show">
        <div class="tool-box line-one">
          <div data-name="标尺" :class="['tool-item', ruler ? 'bg' : '']" @click="() => ruler = !ruler">
            <svg t="1683131501320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="13113" width="26" height="26">
              <path
                d="M170.666667 725.333333h682.666666a42.666667 42.666667 0 0 0 42.666667-42.666666V341.333333a42.666667 42.666667 0 0 0-42.666667-42.666666H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v341.333334a42.666667 42.666667 0 0 0 42.666667 42.666666z m42.666666-341.333333h85.333334v128h85.333333V384h85.333333v170.666667h85.333334V384h85.333333v128h85.333333V384h85.333334v256H213.333333V384z"
                fill="" p-id="13114"></path>
            </svg>
          </div>
          <!-- <history></history> -->
        </div>
        <import-park></import-park>
        <tools></tools>
        <!-- <import-file></import-file> -->
        <layer></layer>
      </template>
    </div>

    <!-- 画布区域 -->
    <div id="workspace" class="workspace" style="width: 100%; position: relative; background: #f1f1f1">
      <div class="canvas-box">
        <div class="inside-shadow"></div>
        <canvas :id="canvasId" :class="ruler ? 'design-stage-grid' : ''"></canvas>
        <div class="tool-box">
          <dragMode></dragMode>
          <zoom></zoom>
          <mouseMenu></mouseMenu>
        </div>
      </div>
    </div>

    <!-- 属性栏 -->
    <div class="right">
      <template v-if="show">
        <set-size></set-size>
        <!-- <bg-bar></bg-bar> -->
        <div class="tool-container">
          <h4 class="title">操作</h4>
          <div class="tool-box">
            <group></group>
            <replaceImg></replaceImg>
            <lock></lock>
            <dele></dele>
            <clone></clone>
          </div>
        </div>
        <!-- 组对齐方式 -->
        <align></align>
        <!-- 居中对齐 -->
        <center-align></center-align>
        <!-- 翻转 -->
        <flip></flip>
      </template>
      <attribute v-if="show"></attribute>

    </div>
  </div>
</template>

<script>
import history from './components/history.vue';
import importPark from './components/importPark.vue';
import tools from "./components/tools.vue" // 工具栏
import importFile from './components/importFile.vue';
import layer from './components/layer.vue';

import dragMode from "./components/dragMode.vue"
import zoom from './components/zoom.vue';
import mouseMenu from './components/contextMenu/index.vue'; // 右键菜单

import setSize from './components/setSize.vue';
import bgBar from './components/bgBar.vue';
import attribute from './components/attribute.vue';
import group from './components/group.vue';
import replaceImg from './components/replaceImg.vue';
import clone from './components/clone.vue';
import lock from './components/lock.vue';
import dele from './components/del.vue';
import align from './components/align.vue';
import centerAlign from './components/centerAlign.vue';
import flip from './components/flip.vue';


import { fabric } from 'fabric';
import Editor from './core';
import CanvasEventEmitter from './utils/event/notifier';
const event = new CanvasEventEmitter();
const canvas = {};

export default {
  components: {
    history,
    importPark,
    tools,
    importFile,
    layer,

    dragMode,
    zoom,
    mouseMenu,

    setSize,
    bgBar,
    attribute,
    group,
    replaceImg,

    clone,
    lock,
    dele,

    align,
    centerAlign,
    flip
  },
  provide: {
    canvas,
    fabric,
    event,
  },
  watch: {
    ruler: {
      handler(value) {
        if (!this.canvas.ruler) return;
        if (value) {
          this.canvas.ruler.enable();
        } else {
          this.canvas.ruler.disable();
        }
      },
    },
  },
  data() {
    return {
      // canvasId: 'canvas_' + this._uid,
      canvasId: 'canvas',
      ruler: false,
      show: false,
      select: null,
    }
  },
  mounted() {
    this.canvas = new fabric.Canvas(this.canvasId, {
      fireRightClick: true, // 启用右键，button的数字为3
      stopContextMenu: true, // 禁止默认右键菜单
      controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
    });

    canvas.c = this.canvas;
    event.init(canvas.c);
    canvas.editor = new Editor(canvas.c);
    canvas.c.renderAll();
    this.show = true;
  },
  methods: {
    importJson(jsonFile) {
      canvas.c.loadFromJSON(jsonFile, () => {
        canvas.c.renderAll.bind(canvas.c);
        setTimeout(() => {
          const workspace = canvas.c.getObjects().find((item) => item.id === 'workspace');
          workspace.set('selectable', false);
          workspace.set('hasControls', false);
          canvas.c.requestRenderAll();
          canvas.editor.editorWorkspace.setSize(workspace.width, workspace.height);
          canvas.c.renderAll();
          canvas.c.requestRenderAll();
        }, 100);
      });

    },
    exportJson() {
      return canvas.c.toJSON(['id', 'gradientAngle', 'selectable', 'hasControls', 'attchData']);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 100px);
  // height: calc(100vh - 50px - 35px);
  box-sizing: border-box;
}

.container {
  display: flex;

  .left,
  .right {
    flex: none;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
  }
}


.workspace {
  overflow: hidden;

  .canvas-box {
    position: relative;
    width: 100%;
    height: 100%;

    // 画布内阴影
    .inside-shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 9px 2px #0000001f;
      z-index: 2;
      pointer-events: none;
    }

    // 网格背景
    .design-stage-grid {
      --offsetX: 0px;
      --offsetY: 0px;
      --size: 16px;
      --color: #dedcdc;
      background-image: linear-gradient(45deg,
          var(--color) 25%,
          transparent 0,
          transparent 75%,
          var(--color) 0),
        linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
      background-position: var(--offsetX) var(--offsetY),
        calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
      background-size: calc(var(--size) * 2) calc(var(--size) * 2);
    }
  }
}


.container {
  ::v-deep {
    .tool-container {
      margin-top: 20px;

      .title {
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .input-item+.input-item {
        margin-top: 6px;
      }

      .input-item {
        display: flex;
        align-items: center;

        .label {
          width: 80px;
        }
      }
    }

    .tool-box {
      display: flex;
      justify-content: space-around;


      .tool-item {
        text-align: center;
        background: #f6f6f6;
        margin: 6px;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        transition: all 300ms;

        &:hover {
          background: #edf9ff;

          svg {
            fill: #2d8cf0;
          }
        }

        &::before,
        &::after {
          position: absolute;
          left: 50%;
          bottom: 100%;
          opacity: 0;
          transform: translate3d(0, -30px, 0);
          transition: all 300ms;
        }

        &::before {
          margin: 0 0 12px -35px;
          border-radius: 2px;
          width: 70px;
          height: 30px;
          line-height: 30px;
          background-color: rgba(#000000, .5);
          text-align: center;
          color: #fff;
          content: attr(data-name);
        }

        &::after {
          margin-left: -6px;
          border: 6px solid transparent;
          border-top-color: rgba(#000000, .5);
          width: 0;
          height: 0;
          content: "";
        }

        &:hover {

          &::before,
          &::after {
            opacity: 1;
            transform: translate3d(0, 0, 0);
          }
        }
      }

      .bg {
        background: #b5d6f9;

        svg,
        path {
          fill: #2d8cf0;
        }
      }

      .disabled {
        opacity: 0.2;
        pointer-events: none;
      }
    }
  }



  .line-one {
    display: flex;
    justify-content: flex-start;
  }
}
</style>
